Graphical Java Lesson 1-5: Making Programs Interactive with the Mouse 
So far, you have learned how to make programs that respond to keyboard input. In this lesson, you will 
learn how to make programs that respond to mouse input. Let's create a new project: 
Colored Boxes. In this program, you will use the mouse to create and destroy colored rectangles in 


your program's main window. 


First, let's set up our main window. Add the following import statement to your 
ColoredBoxes. java source file: 


import javax.swing.JFrame; 
Make your ColoredBoxes class look like: 


public class ColoredBoxes { 
public static JFrame main window; 


public static void main(String[] args) { 
main window = new JFrame("Colored Boxes") ; 
main window.setDefaultCloseOperation (JFrame.EXIT ON CLOSE) ; 
main window.setSize(320, 200); 
main window.setVisible (true); 


Then, we'll set up our content pane. Create a new class: ContentPane. Go to your 
ContentPane. java source file, and add the following import statements to it: 


import javax.swing.JPanel; 
import java.awt.Graphics; 


Make your Content Pane class look like: 


public class ContentPane extends JPanel { 
public ContentPane () 
{ 
super(null, true); 


} 


protected void paintComponent (Graphics g) 
{ 
} 


We'll leave the paintComponent method empty, until we're ready to draw colored boxes on the 
screen. Let's give our main window a ContentPane object. Go to your ColoredBoxes.java 
source file. In your main method, before the call to set Visible, insert the following line of code: 


main window.setContentPane (new ContentPane()); 


Let's make some colored boxes! How many? As many as we want, so we'll use an ArrayList (in the 
java.util package), to store them. Import the ArrayList class, with the following import 
statement: 


import java.util.ArrayList; 


To store a box, we'll use Java's built-in Rectangle class. That will keep things simple. Import the 
Rectangl]e class, with the following import statement: 


import java.awt.Rectangle; 


To store our collection of boxes, we'll use an ArrayList of Rectangles. Add the following 
declaration to your list of global variables: 


public static ArrayList<Rectangle> boxes; 


Let's initialize our ArrayList. At the beginning of the body of your main method, insert the 
following line of code: 


boxes = new ArrayList<>(); 


We'll start with an empty ArrayList, because we are going to use the mouse to create boxes. Each 
time the user clicks the left mouse button somewhere in our program's main window, we'll create a new 
box centered around the place where the user clicked. 


Let's give our program the ability to respond to mouse input. Create a new class: 
MouselInputProcessor. Go to your MouseInputProcessor. java source file. We're going 
to have our main window listen for mouse input, and have an object of this type process that input, so 
that we can make things happen, when mouse buttons are pressed. 


We'll make our MouseInputProcessor class a better version of the MouseInputAdapter class 
(in the javax.swing.event package), by having it extend MouseInputAdapter. Import the 
MouselInputAdapter class, with the following import statement: 


import javax.swing.event.MouselInputAdapter; 


Then, change ... 


public class MouseInputProcessor 


.. tO: 


public class MouseInputProcessor extends MouseInputAdapter 


We won't write a constructor for this class, because the built-in one will work fine. Whenever any of 
the mouse's buttons are pressed, a "mouse pressed" event is fired by Java. If the main window is 
listening for "mouse pressed" events, the nmousePressed method of our MouseInput Processor 
class will be called by Java. Let's implement that mousePressed method. In the body of your 
MouselInputProcessor class, add the following code: 


public void mousePressed(MouseEvent e) 
{ 

int btn = e.getButton(); 

Point pt = e.getPoint(); 


if (btn == MouseEvent.BUTTON1) 
{ 


ColoredBoxes.boxes.add ( 
new Rectangle(pt.x - 5, pt.y - 5, 10, 10)); 
ColoredBoxes.main window.repaint (); 


} 


You will need to import the MouseEvent class (in the java.awt.event package), as well as the 
Point (in the java. awt package) and Rectangle classes, with the following import statements: 


import java.awt.event.MouseEvent; 
import java.awt.Point; 
import java.awt.Rectangle; 


Whenever a mouse button is pressed, the mouse sends a special code to the computer, which then 
passes it to your program. Each button has its own special code. BUTTON1 is a symbolic constant, 
whose value is the code for the left mouse button. BUTTONS is the code for the right mouse button. 


Whenever a mouse button is pressed, the mouse also sends the coordinates of the mouse pointer's 
location on the screen to the computer. A Point object is used to store these coordinates. You can get 
where the mouse was clicked, relative to the origin of your main window's content pane, by calling the 
getPoint method of the MouseEvent class. 


Whenever the user clicks the left mouse button, a new Rectangle will be created, and added to our 
ArrayList, boxes. This Rectangle will be 10 pixels wide and 10 pixels high. We will center the 
Rectangle around where the user clicked, by placing the x-coordinate of its top-left corner 5 pixels 
to the left of where the user clicked, and the y-coordinate of its top-left corner 5 pixels above that 
location. Half of the Rectangle will be to the left of where the user clicked, while the other half will 
be to the right. Half of the Rectangle will be above where the user clicked, while the other half will 
be below. If you used the symbolic constants, BW and BH, to store the width and height of a box, 
what would the following line of code look like? 


ColoredBoxes.boxes.add(new Rectangle(pt.x - 5, pt.y - 5, 10, 10)); 
Then, we'll repaint the screen, so that you'll see the updated collection of boxes. 


Now, let's draw our boxes. Go to your Content Pane. java source file. In the body of the 
paintComponent method, write the following code: 


g.setColor(Color.RED); // We'll make ALL of our boxes red. 
for (int i = 0; i < ColoredBoxes.boxes.size(); i = i+ 1) 
{ 
g.fillRect (ColoredBoxes.boxes.get(i).x, 
ColoredBoxes.boxes.get(i).y, 
ColoredBoxes.boxes.get(i).width, 
ColoredBoxes.boxes.get(i).height) ; 


} 

Import the Color class, with the following import statement: 

import java.awt.Color; 

What's this? A loop? I feel like I haven't written one of these in AGES! In an event-driven program, 
there's something like a "big loop" working behind the scenes! While the program is running, it listens 


for events. If an event happens, the program calls the appropriate callback method. 


Finally, we need to actually use a MouseInputProcessor object, to listen for "mouse pressed" 
events. Go to your ColoredBoxes. java source file. In your main method, replace ... 


main window.setContentPane (new ContentPane()); 
... With: 
ContentPane cp = new ContentPane(); 


main window.setContentPane (cp) ; 
cp.addMouseListener (new MouselInputProcessor()); 


You have to call addMouseListener on the content pane, NOT the main window! 


Run your program. Click the left mouse button inside of the main window a few times. If you have 
done everything right, after a few clicks, it should look something like: 
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If you put some boxes very close to each other, they'll blend together, because they're all the same 
color. If your program is not working properly, make sure your ColoredBoxes class looks like: 


public class ColoredBoxes { 
public static JFrame main window; 
public static ArrayList<Rectangle> boxes; 


public static void main(String[] args) { 
boxes = new ArrayList<>(); 
main window = new JFrame("Colored Boxes"); 
main window.setDefaultCloseOperation (JFrame.EXIT ON CLOSE) ; 
main window.setSize(320, 200); 
ContentPane cp = new ContentPane(); 
main window.setContentPane (cp) ; 
cp.addMouseListener (new MouseInputProcessor()); 
main window.setVisible (true) ; 


Make sure you call addMouseListener on cp, NOT main_window! Check that your 
Content Pane class looks like: 


public class ContentPane extends JPanel { 
public ContentPane () 
{ 
super(null, true); 


} 


protected void paintComponent (Graphics g) 


{ 


g.setColor(Color.RED); // We'll make ALL of our boxes red. 
for (int i = 0; i < ColoredBoxes.boxes.size(); i = i+ 1) 
{ 
g.fillRect (ColoredBoxes.boxes.get(i).x, 
ColoredBoxes.boxes.get(i).y, 
ColoredBoxes.boxes.get (i) .width, 
ColoredBoxes.boxes.get(i).height) ; 


Finally, make sure your MouseInputProcessor class looks like: 


public class MouseInputProcessor extends MouseInputAdapter { 


public void mousePressed(MouseEvent e) 
{ 

int btn = e.getButton(); 

Point pt = e.getPoint(); 


if (btn == MouseEvent.BUTTON1) 


ColoredBoxes.boxes.add ( 
new Rectangle(pt.x - 5, pt.y - 5, 10, 10)); 
ColoredBoxes.main window.repaint (); 


Let's add another feature to this program. Let's make it so that the user can erase an existing box, by 
clicking on it with the RIGHT mouse button. Go to your MouseInputProcessor. java source 
file. In the mousePressed method of yourMouseInputProcessor class, add the following 


S 
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{ 


} 


lse if block to your if statement: 
lse if (btn == MouseEvent.BUTTON3) 
for (int i = ColoredBoxes.boxes.size() - 1; 1 >= 0; 1 =1- 1) 


{ 


if (ColoredBoxes.boxes.get(i).contains (pt) ) 
{ 
ColoredBoxes.boxes.remove (i); 
break; 
} 
} 


ColoredBoxes.main window.repaint (); 


Run your program. Make a few boxes, by left-clicking inside of the main window a few times. Then, 
right-click on those boxes, to get rid of them. If you left-click N times, in the same place, you will then 
have to right-click N times, in that location, to remove all N of those boxes from the collection. 
Nothing happens, if you right-click somewhere where there are no boxes. 


The above for loop goes through the collection of boxes, from newest (the LAST element of boxes, 
since we always add new boxes at the end of that ArrayList) to oldest (the FIRST element of 
boxes). For each box, it checks whether the place where the user right-clicked (pt) is inside of the 
box, by calling the contains method of that Rectangle object. If the user right-clicked a location 
inside of that box, we remove that box (the one at index i, in boxes) from the collection. We only 
want to remove ONE box from the collection, each time the user right-clicks a location that is inside of 
one or more boxes. Therefore, we use a break statement (break; ), after the call to remove, which 
allows us to break out of that for loop immediately. Without that break statement, we would keep on 
going through the collection of boxes, removing ALL of the boxes that contained pt. Finally, we 
repaint the screen, so that you then see the updated collection of boxes. 


What if we want to know which box our mouse is currently pointing at? How about we make that one 
green, so that it stands out from the rest. In order to do that, we'll need to keep track of where our 
mouse pointer is at all times. Go to your ColoredBoxes. java source file. We'll use a Point 
object to keep track of the mouse pointer's location, so add the following declaration to your list of 
global variables: 


public static Point mouse ptr; 

Import the Point class, with the following import statement: 
import java.awt.Point; 

In your main method, right after ... 

boxes = new ArrayList<>(); 

... insert the following code, to initialize mouse ptr: 
mouse pir = mew Point (); 


Whenever the mouse is moved, a "mouse moved" event is fired by Java. If the main window is 
listening for "mouse moved" events, the mouseMoved method of our MouseInput Processor 
class will be called by Java. Go to your MouseInputProcessor. java source file. Let's 
implement that mouseMoved method. In the body of yourMouseInputProcessor class, add the 
following code: 


public void mouseMoved (MouseEvent e) 

{ 
ColoredBoxes mouse ptr = e.,getPoint (); 
ColoredBoxes.main window.repaint (); 


Whenever the mouse is moved, the mouse sends the coordinates of the mouse pointer's new location on 
the screen to the computer. A Point object is used to store these coordinates. Here, we copy these 
coordinates to the global variable, mouse ptr, so that we can later use them, when we draw the 
screen. We then tell Java to repaint the screen. 


Now, we're going to add the code that will highlight the box our mouse is currently pointing at in green. 
Go to your Content Pane. java source file. Add the following code at the END of the body of your 
paintComponent method: 


g.setColor(Color.GREEN) ; 
for (int i = ColoredBoxes.boxes.size() - 1; 1 >= 0; 1=i1- 1) 


if (ColoredBoxes.boxes.get(i).contains (ColoredBoxes.mouse ptr) ) 


g.fillRect (ColoredBoxes.boxes.get(i).x, 
ColoredBoxes.boxes.get(i).y, 
ColoredBoxes.boxes.get(i).width, 
ColoredBoxes.boxes.get(i).height) ; 
break; 


The above for loop goes through the collection of boxes, from newest to oldest. For each box, it checks 
whether the current location of the mouse pointer (mouse ptr) is inside of that box. If the mouse is 
over that box, that box is drawn on top of ALL of the others, in green. It's drawn in green, because we 
set g's current color to green, before we entered the for loop. It's drawn on top of everything else, 
because it's drawn last. Finally, only one box, if any, is ever drawn in green, because after we draw the 
green box, we break out of the for loop. 


In order to use aMouseInputProcessor object to listen for "mouse moved" events, we have to do 
one more thing. Go back to your ColoredBoxes. java source file. In your main method, 
replace ... 


cp.addMouseListener (new MouseInputProcessor()); 
... with: 
MouselInputProcessor mip = new MouselInputProcessor(); 


cp.addMouseListener (mip) ; 
cp.addMouseMotionListener (mip) ; 


"Mouse moved" events are handled separately from "mouse pressed" events! And again, you have to 
call addMouseMotionListener on the content pane, NOT the main window! 


Run your program. Make some boxes, by clicking the left mouse button inside of the main window a 
few times. Then, move your mouse over some of your boxes. If you have done everything right, it 
should look something like the following, when your mouse is over one of your boxes: 
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If your program is not working properly, make sure your ColoredBoxes class looks like: 


public class ColoredBoxes { 
public static JFrame main window; 
public static ArrayList<Rectangle> boxes; 
public static Point mouse ptr; 


public static void main(String[] args) { 
boxes = new ArrayList<>(); 
mouse ptr = new Point(); 
main window = new JFrame("Colored Boxes"); 
main window.setDefaultCloseOperation (JFrame.EXIT ON CLOSE) ; 
main window.setSize(320, 200); 
ContentPane cp = new ContentPane(); 
main window.setContentPane (cp) ; 
MouselInputProcessor mip = new MouselInputProcessor(); 
cp.addMouseListener (mip) ; 
cp.addMouseMotionListener (mip) ; 
main window.setVisible (true) ; 


Check that the paintComponent method of your Content Pane class looks like: 


protected void paintComponent (Graphics g) 

{ 
g.setColor(Color.RED); // We'll make ALL of our boxes red. 
for (int i = 0; i < ColoredBoxes.boxes.size(); i = i+ 1) 


{ 


g.fillRect (ColoredBoxes.boxes.get(i).x, 
ColoredBoxes.boxes.get(i).y, 
ColoredBoxes.boxes.get (i) .width, 
ColoredBoxes.boxes.get(i).height) ; 


} 


g.setColor(Color.GREEN) ; 
for (int i = ColoredBoxes.boxes.size() - 1; 1 >= 0; i1=i- 1) 


if (ColoredBoxes.boxes.get(i).contains (ColoredBoxes.mouse ptr) ) 


g.fillRect (ColoredBoxes.boxes.get(i).x, 
ColoredBoxes.boxes.get(i).y, 
ColoredBoxes.boxes.get(i).width, 
ColoredBoxes.boxes.get(i).height) ; 
break; 


} 
Finally, make sure your MouseInputProcessor class looks like: 


public class MouseInputProcessor extends MouseInputAdapter { 
public void mousePressed(MouseEvent e) 
{ 
int btn = e.getButton(); 
Point pt = e.getPoint(); 


if (btn == MouseEvent.BUTTON1) 


ColoredBoxes.boxes.add ( 
new Rectangle(pt.x - 5, pt.y - 5, 10, 10)); 
ColoredBoxes.main window.repaint (); 


else if (btn == MouseEvent.BUTTON3) 
{ 


for (int i = ColoredBoxes.boxes.size() - 1; 1 >= 0; i1=i1- 1) 
{ 
if (ColoredBoxes.boxes.get(i).contains (pt) ) 
{ 
ColoredBoxes.boxes.remove (i); 
break; 
} 
} 
ColoredBoxes.main window.repaint (); 
} 
} 


public void mouseMoved (MouseEvent e) 

{ 
ColoredBoxes.mouse ptr = e.getPoint(); 
ColoredBoxes.main window.repaint (); 


Feel free to play around with this code, although you might want to save a backup copy first, in case 
you mess something up, and don't know how to fix it. To see other mouse-related events that programs 


can respond to, Google the following: 


Java MouselInputAdapter class 
Java MouseEvent class 


Try refactoring your code, so that the user can make boxes of different colors. 


